{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}
{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/multilevel-menu/mega-menu-nike/mega-menu-nike.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
	<script type="text/javascript">
		$(document).ready(function(){
		    $(".dropdown").hover(            
		        function() {
		            $('.dropdown-menu', this).stop( true, true ).slideDown("fast");
		            $(this).toggleClass('open');        
		        },
		        function() {
		            $('.dropdown-menu', this).stop( true, true ).slideUp("fast");
		            $(this).toggleClass('open');       
		        }
		    );
		});
	</script>
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
    
        <div class="page-header">
          <h1>Mega Menu Nike with Tabs Navigation</h1>
        </div>
        
		<nav class="navbar navbar-default" role="navigation">
		  <div class="container-fluid">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-megadropdown-tabs">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand nike" href="#"></a>
		    </div>
		
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
		        <ul class="nav navbar-nav">
		            <li><a href="#">Link</a></li>
		            <li><a href="#">Link</a></li>
		    		<li class="dropdown mega-dropdown active">
					    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>				
						<div class="dropdown-menu mega-dropdown-menu">
		                    <div class="container-fluid">
		    				    <!-- Tab panes -->
		                        <div class="tab-content">
		                          <div class="tab-pane active" id="men">
		                            <ul class="nav-list list-inline">
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_Running.png') }}"><span>Running</span></a></li>
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_Basketball.png') }}"><span>Basketball</span></a></li>
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_Football.png') }}"><span>Football</span></a></li>
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_Soccer.png') }}"><span>Soccer</span></a></li>
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_MensTraining.png') }}"><span>Men's Training</span></a></li>
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_WomensTraining.png') }}"><span>Women's Training</span></a></li>
		                            </ul>
		                          </div>
		                          <div class="tab-pane" id="women">
		                            <ul class="nav-list list-inline">
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_Running.png') }}"><span>Running</span></a></li>
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_Basketball.png') }}"><span>Basketball</span></a></li>
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_Football.png') }}"><span>Football</span></a></li>
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_Soccer.png') }}"><span>Soccer</span></a></li>                                
		                            </ul>
		                          </div>
		                          <div class="tab-pane" id="kids">
		                            <ul class="nav-list list-inline">
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_Running.png') }}"><span>Running</span></a></li>
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_Basketball.png') }}"><span>Basketball</span></a></li>
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_Football.png') }}"><span>Football</span></a></li>
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_Soccer.png') }}"><span>Soccer</span></a></li>
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_MensTraining.png') }}"><span>Men's Training</span></a></li>
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_WomensTraining.png') }}"><span>Women's Training</span></a></li>
		                            </ul>
		                          </div>
		                          <div class="tab-pane" id="sports">
		                            <ul class="nav-list list-inline">                                
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_Basketball.png') }}"><span>Basketball</span></a></li>
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_Football.png') }}"><span>Football</span></a></li>
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_Soccer.png') }}"><span>Soccer</span></a></li>
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_MensTraining.png') }}"><span>Men's Training</span></a></li>
		                                <li><a href="#"><img src="{{ asset('bundles/applicationbootstrap/images/nike/OneNike_Global_Nav_Icons_WomensTraining.png') }}"><span>Women's Training</span></a></li>
		                            </ul>
		                          </div>
		                        </div>
		                    </div>
		                    <!-- Nav tabs -->
		                    <ul class="nav nav-tabs" role="tablist">
		                       <li class="active"><a href="#men" role="tab" data-toggle="tab">Men</a></li>
		                       <li><a href="#women" role="tab" data-toggle="tab">Women</a></li>
		                       <li><a href="#kids" role="tab" data-toggle="tab">Kids</a></li>
		                       <li><a href="#sports" role="tab" data-toggle="tab">Sports</a></li>
		                    </ul>                    
						</div>				
					</li>
		        </ul>
		        <form class="navbar-form navbar-left" role="search">
		            <div class="form-group">
		              <input type="text" class="form-control" placeholder="Search">
		            </div>
		            <button type="submit" class="btn btn-default">Submit</button>
		        </form>
		        <ul class="nav navbar-nav navbar-right">
		            <li><a href="#">Link</a></li>
		            <li class="dropdown">
		              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
		              <ul class="dropdown-menu" role="menu">
		                <li><a href="#">Action</a></li>
		                <li><a href="#">Another action</a></li>
		                <li><a href="#">Something else here</a></li>
		                <li class="divider"></li>
		                <li><a href="#">Separated link</a></li>
		              </ul>
		            </li>
		        </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>

    </div> <!-- /container -->
{% endblock %}